<template>
  <view>
    <!-- 个人信息简介 -->
    <view class="personal">
      <image class="personal-img" :src="userInfo.headimg"></image>
      <view class="middle">
        <view class="name">
          <span>
            {{ userInfo.memberName }}
          </span>

          <!-- <span>家享卡</span> -->
        </view>
        <view class="integral">到期时间2025</view>
      </view>
      <!-- <view class="member-card">
        <button @click="toPowderCard">1500元券</button>
      </view> -->
    </view>

    <!-- 个人信息积分等 -->
    <view class="menu">
      <view
        class="menu-item"
        v-for="item of menu"
        :key="item.id"
        @click="toDetail(item)"
      >
        <text class="content">
          {{ item.content }}
        </text>
        <text class="title">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo } from '@/api'
import mixin from '@/mixins'
export default {
  mixins: [mixin],
  data() {
    return {
      menu: [
        {
          id: 1,
          name: '积分',
          content: 0
        },
        {
          id: 2,
          name: '优惠券',
          content: 0
        },
        {
          id: 3,
          name: '停车券',
          content: 0
        }
      ]
    }
  },
  created() {
    getUserInfo(this.openId).then(res => {
      this.menu[1].content = res.data.couponCont || 0
    })
  },
  methods: {
    toPowderCard() {
      uni.navigateTo({
        url: '/pages/package/member-center/component/powder-pay'
      })
      // if (this.memberCard.length > 0) {
      //   uni.navigateTo({
      //     url: '/pages/package/member-center/component/powder-pay'
      //   })
      // } else {
      //   uni.navigateTo({
      //     url: '/pages/package/member-center/component/powder-card'
      //   })
      // }
    },
    toDetail(item) {
      //#ifdef MP-WEIXIN
      if (item.id === 2) {
        uni.navigateTo({
          url: '/pages/package/member-center/component/coupon'
        })
      } else {
        uni.showToast({
          title: '暂无' + item.name + '!'
        })
      }
      //#endif
      //#ifdef MP-ALIPAY
      uni.showToast({
        title: '暂无' + item.name + '!'
      })
      //#endif
    }
  },
  computed: {
    ...mapState(['userInfo', 'openId'])
  }
}
</script>

<style lang="less" scoped>
.personal {
  display: flex;
  align-items: center;
  margin: 10px 0;
  .personal-img {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: 1px solid rgba(255, 0, 0, 0.445);
  }
  .middle {
    flex: 1;
    display: flex;
    padding: 0 40rpx;
    flex-direction: column;
    .name {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;
    }
    .integral {
      color: #454545;
    }
  }
  .member-card {
    width: 180rpx;
  }
}
.menu {
  display: flex;
  flex-wrap: wrap;
  background: #ebe9e986;
  .menu-item {
    width: 33%;
    height: 140rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .content {
      font-size: 32rpx;
      margin-bottom: 20rpx;
      color: #eb5948;
    }
    .title {
      font-size: 26rpx;
      font-weight: 600;
    }
  }
}
.slot-content {
  font-size: 28rpx;
  padding: 0 30rpx;
}
</style>
